<template>
    <Myhead noback="flase" title="首页"></Myhead>
    <div class="home ">
        <div class="swipe">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(item, index) in homeList" :key=index>

                    <van-image width="100%" height='300' :src="HomeUrl[index]" />
                </van-swipe-item>
            </van-swipe>

        </div>
  
        <div class="van-tabs">
            <van-tabs v-model:active="active">
                <!-- 最热推荐 -->
                <van-tab title="最热推荐">
                    <div class="hot-recommend" v-for="(item, index) in homeList" @click="goDetail(item)">
                        <h2>
                            {{ item.title }}
                        </h2>
                        <p>
                            <van-icon name="chat-o">
                                {{ item.address }}
                            </van-icon>
                        </p>

                        <p class="time">
                            <van-icon name="chat-o">
                                {{ item.time }}
                            </van-icon>
                            <van-icon name="chat-o">
                                热度 : {{ item.hot }}
                            </van-icon>
                        </p>
                        <p>
                            <van-icon name="chat-o">
                                {{ item.author.username }}
                            </van-icon>
                        </p>
                        <div class="lable">
                            <van-tag v-for="tag, index in item.tags" type="primary">
                                {{ tag.label }}
                            </van-tag>
                        </div>
                        <div>
                            <van-image width="95%" height='300' :src="HomeUrl[index]" />
                            <p>{{ item.content }}</p>
                        </div>

                        <van-row class="row" justify="center">
                            <van-col span="8">
                                <van-icon name="good-job-o">
                                    1
                                </van-icon>
                            </van-col>
                            <van-col span="8">
                                <van-icon name="share-o">

                                    1
                                </van-icon>
                            </van-col>
                            <van-col span="7">
                                <van-icon name="like-o">
                                    1
                                </van-icon>
                            </van-col>
                        </van-row>



                    </div>

                </van-tab>
                <!-- 最新推荐 -->
                <van-tab title="最新推荐">
                    <div @click="goDetail(item)" class="hot-recommend" v-for="(item, index) in homeList">
                        <h2>
                            {{ item.title }}
                        </h2>
                        <p>
                            <van-icon name="chat-o">
                                {{ item.address }}
                            </van-icon>
                        </p>

                        <p class="time">
                            <van-icon name="chat-o">
                                {{ item.time }}
                            </van-icon>
                            <van-icon name="chat-o">
                                热度 : {{ item.hot }}
                            </van-icon>
                        </p>
                        <p>
                            <van-icon name="chat-o">
                                {{ item.author.username }}
                            </van-icon>
                        </p>
                        <div class="lable">
                            <van-tag v-for="tag, index in item.tags" type="primary">
                                {{ tag.label }}
                            </van-tag>
                        </div>
                        <div>


                            <lazy-component>
                                <van-image width="95%" height='300' :src="HomeUrl[index]" />
                            </lazy-component>
                            <p>{{ item.content }}</p>
                        </div>

                        <van-row class="row" justify="center">
                            <van-col span="8">
                                <van-icon name="good-job-o">
                                    1
                                </van-icon>
                            </van-col>
                            <van-col span="8">
                                <van-icon name="share-o">

                                    1
                                </van-icon>
                            </van-col>
                            <van-col span="7">
                                <van-icon name="like-o">
                                    1
                                </van-icon>
                            </van-col>
                        </van-row>



                    </div>

                </van-tab>

            </van-tabs>


        </div>
 
    </div>
</template>

<script setup>
import { ref, onMounted, reactive, watchEffect } from 'vue'
import { GetBannerAPI, GetHomeListAPI, AddHotAPI } from '@/views/Home/homeapi'
import { useComon } from '@/Hooks/comon'
import { useRouter } from 'vue-router'
let router = useRouter()
let { gotowhere } = useComon()
let active = ref(0)   // 推荐



// 获取轮播列表
let bannerList = ref([])
let GetBanner = async () => {
    let res = await GetBannerAPI()
    // console.log( res);
    if (res.status == 200) {
        bannerList.value = res.data.result
        // console.log('res',bannerList.value);

    }
}


// 获取推荐列表
let HomeUrl = ref([])
let homeList = ref([])
let params = reactive({
    page: 2,
    pageSize: 20,
    type: '1'
})
let GetHomeList = async () => {
    let res = await GetHomeListAPI({ params })
    console.log('res', res);
    if (res.data.code == 200) {
        let array = res.data.result
        console.log('array', array);
        console.log('array1111', array.imgs);
        array.forEach(item => {
            homeList.value.push(item)
        });
    }
    console.log('homeList.value',homeList.value);

    // 获取图片
    homeList.value.forEach((item) => {
        let url = item.imgs[0].url.replace('public', 'http://81.69.235.62:3000');
        HomeUrl.value.push(url)
    })

}

// 详情页
let goDetail = async (item) => {
    console.log('item.id', item.hot);
    let id = item._id
    let hot = item.hot
    await AddHotAPI({
        _id: id,
        hot: hot + 99999999999999
    })
    router.push({
        name: 'particulars',
        query: {
            id: id
        }
    })
}

let onLoad = async () => {
    // 监听到达底部  -> 默认开启加载
    params.pageSize = params.pageSize + 10; // 加载下一页
    console.log("到达底部", params.pageSize);
    

};


 

onMounted(() => {
    GetBanner()
    GetHomeList()


})
</script>


<style lang="scss" scoped>
.swipe {
    background-color: antiquewhite;

    .my-swipe .van-swipe-item {
        // color: #fff;
        // font-size: 20px;
        // line-height: 150px;
        text-align: center;
        // background-color: #39a9ed;
    }
}

.van-tabs {
    margin-left: 8px;

    .hot-recommend {
        width: 90%;
        height: 350px;
        // background-color: #39a9ed;
        border: 1px solid rgba(255, 0, 170, 0.183);
        border-radius: 10px;
        padding: 10px;
        margin-top: 10px;
        // position: absolute;

        .time {
            display: block;
            display: flex;
            justify-content: space-between;
        }

        p {
            margin-top: 10px;
        }

        .lable {
            .van-tag {
                margin-top: 10px;
                margin-right: 10px;
                margin-bottom: 10px;
            }
        }

        .row {
            margin-top: 20px;
            margin-left: 10px;
        }
    }
}
</style>
